{% extends 'home/public/base.html' %}


{% block 'css' %}
    <link rel="stylesheet" type="text/css" href="/static/home/public/css/cart.css">
    <link rel="stylesheet" type="text/css" href="/static/home/public/css/cart-app.css">
{% endblock %}

{% block 'header-header' %}
<div class="navbar-left">
    <ol class="breadcrumb">
        <li >购物车</li>
        <li class="active" style="color:red">确认订单</li>
        <li>在线支付</li>
        <li>完成 </li>
    </ol>
</div>
{% endblock %}

{% block 'con' %}
<hr>
<hr>
<hr>
<div class="mainbody cart">
        <h3>购买的商品信息</h3>
        <div class="container">
            <!-- 购物车详情头 -->
            <table class="cart-header">
                <tbody>
                    <tr>
                       
                        <td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品图片</td>
                        <td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
                        <td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
                        <td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
                        <td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
                    </tr>
                </tbody>
            </table><!-- 购物车详情头 E-->
            
            <!-- 购物清单信息列表 -->
            <div class="cart-merchant-list">
                <div class="cart-merchant">
                    <table class="cart-merchant-body">
                        <tbody>
                            {% for v in orders %}
                            <tr class="cart-product" id="pro5">
                               <td class="cart-col-select col-md-3 col-xs-4 col-sm-4">  
                                   <a href="meilanx.html" class="cart-product-link" target="_blank">
                                       <img src="{{ v.pic }}" class="cart-product-img" alt="">
                                   </a>
                               </td>
                                <td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
                                    <a href="meilanx.html" class="cart-product-link" target="_blank">
                                      <p>{{ v.title }}</p>
                                    </a>
                                </td>
                                <td class="cart-col-price col-md-2 hidden-xs hidden-sm">
                                    <p>
                                        <span class="cart-product-price">{{ v.price}}</span>
                                    </p>
                                </td>
                                <td class="cart-col-number col-md-2 hidden-xs hidden-sm">
                                    <p>
                                        <span class="number">{{ v.num }}</span>
                                    </p>
                                 
                                </td>
                                {% load pagetag %}
                                <td class="cart-col-total col-md-1 hidden-xs hidden-sm">
                                    <span class="cart-product-price total">{% cheng v.price v.num %}</span>
                                </td>
                                
                            </tr>
                           {% endfor %} 

                        </tbody>
                    </table>
                </div>
            </div><!-- 购物清单信息列表 E-->
        </div>
        <h3>收货信息</h3>
        <div class="cart-footer" id="cartFooter">
            <div class="container">
                <div class="row">
                    <center>
                        <div class="col-md-10">
                            <form id="ordercreate" action="{% url 'ordercreate' %}" method="post">
                                {% csrf_token %}
                                <input type="hidden" name="ids" value="{{ ids|join:',' }}">
                                收货人: <input  style="height:40px;" type="text" name="addname">
                                收货地址: <input style="height:40px;"  type="text" name="address">
                                收货电话: <input style="height:40px;"  type="text" name="addphone">
                                收货邮编: <input style="height:40px;"  type="text" name="addcode">
                            </form>
                        </div>
                    </center>
                </div>
            </div>
        </div>
        <br>
        
        <h3>结算信息</h3>

        <!-- 结算详情 -->
        <div class="cart-footer" id="cartFooter">
            <div class="container">
               <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
                  
                   <span class="cart-footer-count">
                        共
                        <span class="cart-footer-num" id="totalCount">5</span>
                        件商品
                   </span>

                   <a href="{% url 'cartindex' %}" style="color:red">返回购物车</a>
                </div>
                <div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
                    <span class="cart-footer-sum">
                        <span class="cart-footer-text">已优惠</span>
                        <span class="cart-footer-num red" id="totalDiscount">0.00</span>
                        <span class="cart-footer-text">元， 合计(不含运费)：</span>
                        <span class="cart-footer-total" id="totalPrice">0.00</span>
                    </span>
                    <div class="mz-btn success" id="cartSubmit" >提交订单</div>
                  
                </div>
            </div>
        </div><!-- 结算详情 E-->
    </div>

{% endblock %}

{% block 'js' %}
<script type="text/javascript">
   var sumCount =0 
   $('.number').each(function(){
        sumCount += Number($(this).html())

   })
   $('#totalCount').html(sumCount)

   var sumPrice = 0
   $('.total').each(function(){
        
        sumPrice += Number($(this).html())
})
   $('#totalPrice').html(sumPrice)

   $('#cartSubmit').click(function(){
     $('#ordercreate').submit()


   })





</script>


{% endblock %}